<script lang="ts" setup>
interface UserInfoProps {
  nickName?: string;
  userId?: string | boolean;
  phone?: string | boolean;
  avatar?: boolean;
  code?: string;
}

withDefaults(defineProps<UserInfoProps>(), {
  avatar: true,
  nickName: "梁春飞",
  userId: "121083638",
  phone: "13800138000",
});
</script>

<template>
  <umrp-container direction="horizontal" align="center" :gap="10">
    <umrp-avatar v-if="avatar"></umrp-avatar>
    <umrp-container direction="vertical" :gap="4">
      <umrp-text v-if="nickName">{{ nickName }}</umrp-text>
      <umrp-text v-if="phone !== false">{{ phone }}</umrp-text>
      <umrp-text v-if="userId !== false">ID: {{ code || userId }}</umrp-text>
    </umrp-container>
  </umrp-container>
</template>
